<template>
  <div class="order-item" @click.stop="e => $emit('click', e)">
    <van-card :thumb="item.imageUrl" :title="item.name" :desc="optionSelectionsStringify"
              :num="item.quantity" :price="item.price"/>
    <div class="order-item-actions" v-if="existActionsSlot">
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<script>
import * as _ from "lodash"
import { Card } from "vant"
import { order } from "@mall/api-services"

export default {
  name: "OrderItem",
  components: {
    [Card.name]: Card,
  },
  props: {
    item: order.OrderItem,
  },
  computed: {
    optionSelectionsStringify() {
      const { item } = this
      const { optionSelections } = item
      return _.chain(optionSelections)
          .map(({ name, value }) => `${name}:${value}`)
          .join("; ")
          .value()
    },
    existActionsSlot() {
      return this.$slots["actions"]
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-item {
  padding-bottom: 9px;
}
</style>
